<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器设置</title>
    <link rel="stylesheet" href="../static/调试.svg" type="image/x-icon">
    <style>
/*        合并边框*/
        table{
            border-collapse: collapse;
        }
/*        表格标题设置（<caption> 标签中的文字设置）*/
        caption{
            font-size: 30px;
            font-weight: bold;
            color: sandybrown;
        }
/*        表头内容设置（<th>标签内容设置）*/
        th {
            font-size: 20px;
            color: wheat;
            background: lightseagreen;
    }

/*        让HTML的textarea输入框前的文字，在输入框的顶部对齐*/
        span{
            vertical-align: top;
    }

/*选择器*/
/*        1.通用选择器*/
        *{
            color: grey;
        }
/*        2.标签选择器*/
        span{
            color: red;
        }
/*        3.id选择器*/
        #p1{
            color: blue;
        }
/*        4.（多）类选择器*/
        .d1.d2{
            color: greenyellow;
        }
/*        5.（多）属性选择器*/
        [class=c1][xw="n1"]{
            color: red;
        }
/*        6.子类（亲生、直属）选择器*/
        .zh>label{
            color: plum;
        }
/*        7.后代（包括跨层级）选择器*/
        #d11 #d111{
            background: blueviolet;
        }
/*        8.兄弟选择器*/
/*                8.1相邻兄弟*/
        #d123 + td{
            background: darkorange;
            font-size: 20px;
        }
/*                8.2通用兄弟*/
        .pnum ~ td{
            background: powderblue;
            font-size: 15px;
        }
/*        9.分组选择器*/
        #f1,.f2{
            color: yellowgreen;
        }
/*      内外边距设置*/
/*1、边框宽度5px 实线 蓝色*/
/*2、上外边距100px 下外边距10px 上内边距30px 左内边距5px*/
        #d10086{
            border:5px solid blue;
            margin-top:100px;
            margin-bottom:10px;
            padding-top:30px;
            padding-left:5px;
        }
    </style>
</head>
<body id="d10086">
<!--要求每种选择器至少使用一次，属性或者层级可以自己添加-->
<!--设置颜色、背景色、边框、宽高、内外边距-->
    <table border="1">
    <!--    表格标题-->
        <caption>用户信息表</caption>
    <!--    表头信息，上下滚动时候，可以固定表头-->
        <thead>
    <!--    行标签-->
        <tr>
    <!--        表头内容-->
            <th id="p1">用户id</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>邮  箱</th>
            <th>地  址</th>
        </tr>
        </thead>
    <!--    表格主体-->
        <tbody>
        <tr>
    <!--        表格数据-->
            <td>001</td>
            <td class="d1 d2">小李</td>
            <td>13012345671</td>
            <td>xiaoli001@163.com</td>
            <td>北京市朝阳区</td>
        </tr>

        <tr>
            <td>002</td>
            <td class="c1" xw="n1">小王</td>
            <td>13012345672</td>
            <td>xiaowang002@163.com</td>
            <td>北京市朝阳区</td>
        </tr>

        <tr id="d11">
            <td>003</td>
            <td>小赵</td>
            <td>13012345673</td>
            <td id="d111">xiaozhao003@163.com</td>
            <td>北京市朝阳区</td>
        </tr>

        <tr>
            <td>004</td>
            <td id="d123">小孙</td>
            <td>13012345674</td>
            <td>xiaosun004@163.com</td>
            <td>北京市朝阳区</td>
        </tr>

        <tr>
            <td>005</td>
            <td>小周</td>
            <td class="pnum">13012345675</td>
            <td>xiaozhou005@163.com</td>
            <td>北京市朝阳区</td>
        </tr>
        </tbody>
    </table>

<hr>
<!--编写form表单标签 包含 账号、密码、邮箱、多行文本备注、提交按钮-->
    <form action="/user/register/success" method="post">
        <div class="zh">
            <label>账号:
                <input type="text" name="account">
            </label>
        </div>

        <div>
            <label id="f1">密码:
                <input type="text" name="password">
            </label>
        </div>

        <div>
            <label class="f2">邮箱:
                <input type="email" name="email">
            </label>
        </div>

        <div>
            <label><span>备注:</span>
                <textarea name="remark" cols="22" rows="10"></textarea>
            </label>
        </div>

        <div>
            <input type="submit" value="提交">
        </div>
    </form>
</body>
</html>